<template>
  <div class="list">
    <div class="list_box">
      <div class="item" v-for="item in list" :key="item.id">
        <p class="rank">{{ item.index }}</p>
        <p class="userId">{{ item.userId }}</p>
        <p class="money">
          <NuxtImg v-if="item.id !== -1" src="/images/ranking/icon-money.png" />
          {{ item.money }}
        </p>
        <p class="total">
          <span :class="{ 'total-text': item.id !== -1 }">
            {{ item.moneyTotal }}
          </span>
          <span v-if="item.id !== -1">({{ item.moneyTip }})</span>
        </p>
      </div>
      <Placeholder v-if="list.length === 1" />
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("ranking");

defineProps(["activeParentTab", "activeChildTab"]);
const list = ref<any[]>(
  new Array(16).fill({}).map((item, index) => {
    const id = index + 1;
    return {
      id,
      index: index + 1,
      userId: `${id}58****84${id}`,
      money: `${id}.803,2${id}`,
      moneyTotal: `${id}2.094,7${id}`,
      moneyTip: `${10 + id}.00%`,
    };
  })
);
list.value.unshift({
  id: -1,
  index: lang.ranking_list_rank,
  userId: lang.ranking_list_player,
  money: lang.ranking_list_bet,
  moneyTotal: lang.ranking_list_total,
});
</script>

<style scoped lang="scss">
.list {
  width: 100%;
  margin-top: 0.2rem;
  padding: 0 0.2rem;
}
.list .list_box {
  background: #312734;
  border-radius: 0.3rem;
  min-height: 5rem;
  overflow: hidden;
}
.list .list_box .Placeholder {
  width: 50%;
  margin-left: 25%;
}
.list .list_box .item {
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.28rem;
  background-color: #3f2e4b;
  padding: 0 0.3rem;
  &:nth-child(even) {
    background-color: #312734;
  }
}
.list .list_box .item p {
  flex: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.list .list_box .item p:nth-of-type(1) {
  flex: 1;
  font-weight: 100;
}
.list .list_box .item p:nth-of-type(2) {
  font-weight: 100;
}
.list .list_box .item img {
  width: 0.32rem;
  height: 0.36rem;
  margin-right: 0.07rem;
}
.rank {
  color: #eeb4e5;
}
.userId {
  color: #86718c;
}
.money {
  color: #c19aba;
}
.total {
  color: #ff8a4b;
  .total-text {
    color: #ffee00;
  }
}
.item:nth-child(1) p {
  color: #fff;
}
</style>
